<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    img{
      width: 500px;
      height: 300px;
      margin: 20px;
      object-fit: cover;
    }
    body{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
  </style>
</head>
<body>
<img data-src="img/iali0.jpg"  src="img/iali20.jpg" alt="xxx" />
<img data-src="img/iali2.jpg"  src="img/iali20.jpg" alt="xxx" />
<img data-src="img/iali3.jpg"  src="img/iali20.jpg" alt="xxx" />
<img data-src="img/iali4.jpg"  src="img/iali20.jpg" alt="xxx" />
<img data-src="img/iali5.jpg"  src="img/iali20.jpg" alt="xxx" />
<img data-src="img/iali6.jpg"  src="img/iali20.jpg" alt="xxx" />
<img data-src="img/iali9.jpg"  src="img/iali20.jpg" alt="xxx" />
<img data-src="img/iali11.jpg" src="img/iali20.jpg" alt="xxx" />

<script>
  var images = document.getElementsByTagName("img");
  window.addEventListener("scroll", (e)=>{
    eveImage();
  })
  function eveImage() {
    for (let image of images) {
      // offsetTop 为元素距离顶部的距离
      // window.innerHeight 为当前窗口的高度
      // window.scrollY 为滚动距离
      if (image.offsetHeight <= window.scrollY+window.innerHeight){
        image.setAttribute("src",image.getAttribute("data-src"))
      }
    }
  }
  eveImage()
</script>

</body>
</html>